<template>
    <!-- 合作伙伴 -->
    <section class="partners">
        <p class="font-44 font-600 mb-110">合作伙伴</p>
        <div class="partners-box">
            <div class="swiper-partners" v-if="isKeep">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in list" :key="item.id">
                        <img :src="item.newUrl">
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import Swiper from 'swiper'; 
import 'swiper/css/swiper.min.css';
export default {
    data() {
        return {
            mySwiper:null,
            list:[
                {
                    id:0,
                    newUrl:new URL('@/assets/image/home/trademark/9505.png',import.meta.url).href,
                },
                {
                    id:1,
                    newUrl:new URL('@/assets/image/home/trademark/9491.png',import.meta.url).href,
                },
                {
                    id:2,
                    newUrl:new URL('@/assets/image/home/trademark/9501.png',import.meta.url).href,
                },
                {
                    id:3,
                    newUrl:new URL('@/assets/image/home/trademark/9500.png',import.meta.url).href,
                },
                {
                    id:4,
                    newUrl:new URL('@/assets/image/home/trademark/9499.png',import.meta.url).href,
                },
                {
                    id:5,
                    newUrl:new URL('@/assets/image/home/trademark/9498.png',import.meta.url).href,
                },
                {
                    id:6,
                    newUrl:new URL('@/assets/image/home/trademark/9497.png',import.meta.url).href,
                },
                {
                    id:7,
                    newUrl:new URL('@/assets/image/home/trademark/9496.png',import.meta.url).href,
                },
                {
                    id:8,
                    newUrl:new URL('@/assets/image/home/trademark/9494.png',import.meta.url).href,
                },
                {
                    id:9,
                    newUrl:new URL('@/assets/image/home/trademark/9506.png',import.meta.url).href,
                },
            ],
            isKeep:true,
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init(){
            this.mySwiper = new Swiper('.swiper-partners', {
                allowTouchMove: false,
                observer: true, //开启动态检查器，监测swiper和slide
                observeParents: true, //监测父元素变动
                spaceBetween: 10, // 间隔距离
                centeredSlides: true, // 居中
                speed: 5000, // 速度
                autoplay : { //  自动播放
                    delay: 0, //自动切换的时间间隔
                    stopOnLastSlide: false, //切换到最后一个slide时停止自动切换
                    disableOnInteraction: false, //用户操作后是否停止
                },
                loop: true, // 循环
            })
        }
    },
    activated() {
        this.init();
    },
    deactivated(){
    }
}
</script>

<style lang="scss" scoped>
.partners{
    .swiper-wrapper{
        transition-timing-function: linear !important;
    }
    .partners-box{
        width: 100%;
        height: 100%;
        position: relative;
        left: 0;
        top: 0;
        overflow: hidden;
        &::before{
            content: "";
            height: 100%;
            width: 100px;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            background: linear-gradient(90deg, #000 40%, hsla(0, 0%, 100%, 0));
        }
        &::after{
            content: "";
            height: 100%;
            width: 100px;
            position: absolute;
            z-index: 2;
            top: 0;
            right: 0;
            background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #000 40%);
        }
    }
}
</style>